<template>
	<view class="bigbox">
		<view class="head">
			<view>
				<view>数据概要</view>
				<view class="fot1">Data summary</view>
			</view>
			<view class="fot2">实时数据</view>
		</view>
		<view class="box">
			<view class="box_1" v-for="item in list3">
				<view class="box_2">
					<image :src="item.query01" mode=""></image>
					<view>{{item.query03}}</view>
				</view>
				<view>{{item.query04}}（{{item.query05}}）</view>
			</view>
		</view>
		<!-- <view class="head">
			<view>
				<view>业务指标</view>
				<view class="fot1">Business indicators</view>
			</view>
		</view> 
		<view class="box2">
			<view class="box1" v-for="item in list2">
				<view class="box1_1">
					<image :src="item.query01" mode=""></image>
					<view>{{item.query03}}</view>
				</view>
				<view class="box1_2">
					<view>{{item.query04}}</view>
					<view class="fot3">{{item.query05}}/{{item.query06}}笔订单</view>
				</view>
			</view>
		</view> -->
		<view class="head">
			<view>
				<view>统计类型</view>
				<view class="fot1">Statistical type</view>
			</view>
		</view> 
		<view class="box3" @click="tz(1)">
			<view class="box3_1">
				<image src="../../static/36.png" mode=""></image>
				<view>当前逾期</view>
			</view>
			<image src="../../static/40.png" mode=""></image>
		</view>
		<view class="box3" @click="tz(2)">
			<view class="box3_1">
				<image src="../../static/37.png" mode=""></image>
				<view>上月逾期</view>
			</view>
			<image src="../../static/40.png" mode=""></image>
		</view>
		<view class="box3" @click="tz(3)">
			<view class="box3_1">
				<image src="../../static/38.png" mode=""></image>
				<view>本年逾期</view>
			</view>
			<image src="../../static/40.png" mode=""></image>
		</view>
		<view class="box3" @click="tz(4)">
			<view class="box3_1">
				<image src="../../static/39.png" mode=""></image>
				<view>全部逾期</view>
			</view>
			<image src="../../static/40.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1:[],
				list2:[],
				list3:[],
			}
		},
		mounted() {
			this.initial()
		},
		methods: {
			tz:function(i){
				if(i == 1){
					uni.navigateTo({
						url:'../table/table?type=byjj'
					})
				}else if(i == 2){
					uni.navigateTo({
						url:'../table/table?type=bytg'
					})
				}else if(i == 3){
					uni.navigateTo({
						url:'../table/table?type=byfk'
					})
				}else if(i == 4){
					uni.navigateTo({
						url:'../table/table?type=bykj'
					})
				}
			},
			initial:function(){
				//业务指标
				this.$get('report/fxjReport_05/list').then((res)=>{
					// console.log(res.data.result.records)
					this.list2 = res.data.result.records
				})
				this.$get('report/fxjReport_04/list').then((res)=>{
					this.list3 = res.data.result.records
					console.log(this.list3)
				})
				
				//统计类型
				// this.$get('report/fxjReport_06/list').then((res)=>{
				// 	console.log(res.data)
				// 	// this.list2 = res.data.result.records
				// })
			}
		}
	}
</script>

<style>
	
	
	.box3_1>image{
		width: 92rpx;
		height: 92rpx;
		margin-right: 21rpx;
	}
	.box3_1{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.box3>image{
		width:20rpx;
		height:28rpx;
	}
	.box3{
		height: 152rpx;
		border-bottom: 1px solid #F2F2F2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}
	.box2>view{
		width: 50%;
		margin: 30rpx 0;
	}
	.box2{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}
	.fot3{
		font-size:20rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:#999999;
	}
	.box1_2{
		width: 50%;
		white-space: wrap;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		margin-left: 32rpx;
		text-align: center;
	}
	.box1_1>image{
		width: 80rpx;
		height: 80rpx;
	}
	.box1_1{
		font-size:20rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(102,102,102,1);
		text-align: center;
	}
	.box1{
		display: flex;
		justify-content: center;
	}
	.box_2>image{
		width: 28rpx;
		height: 28rpx;
		margin-right: 12rpx;
	}
	.box_2{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.box_1{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 33rpx;
		font-size:26rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
	}
	.box{
		height:300rpx;
		background:rgba(66,134,245,1);
		border-radius:10rpx;
		margin: 30rpx 0;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.fot2{
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(153,153,153,1);
	}
	.fot1{
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(153,153,153,1);
	}
	.head{
		display: flex;
		justify-content: space-between;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
	}
	.bigbox{
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>
